<template>
	<e-popup bgColor="transparent" :show="show" round="40rpx"  :mode="popupMode" 
		:closeOnClickOverlay="true" @close="$emit('close')">
		<!-- #ifndef PRIVATE  -->
		<!-- #ifndef SUBSCRIPTION  -->
		<view class="h5-box e-rela bg-white">
			<view class="h5-box__img e-abso">
				<view class="e-flex e-flex-end">
					<image src="/static/layout/close.png" class="img-48 e-m-b-40" @tap="$emit('close')"></image>
				</view>
				<image :class="[type === '1' ? 'goods-share-img' : 'store-share-img']" :src="mpShareUrl"></image>
		
			</view>
		
			<view class="e-flex-xy-center">
				<!-- #ifdef APP-PLUS  -->
				<!-- <view class="share-item e-p-t-28 e-flex-3" @tap="share('WXSceneSession')">
					<view class="e-flex-xy-center">
						<image :src="$staticPath('wechat.png')"></image>
					</view>
					<view class="e-font-24 text-center">{{ $t('common.微信') }}</view>
				</view>
				<view class="share-item e-p-t-28 e-flex-3" @tap="share('WXSceneTimeline')">
					<view class="e-flex-xy-center">
						<image :src="$staticPath('timeline.png')"></image>
					</view>
					<view class="e-font-24 text-center">{{ $t('common.朋友圈') }}</view>
				</view> -->
				<view class="share-item e-p-t-28 e-flex-3" @tap="hanldeSave">
					<view class="e-flex-xy-center">
						<image :src="$staticPath('save.png')"></image>
					</view>
					<view class="e-font-24 text-center">{{ $t('common.保存图片') }}</view>
				</view>
				<!-- #endif -->
				<!-- #ifndef APP-PLUS  -->
				<view class="share-item e-p-t-28 e-flex-3" @tap="webShare" v-if="hasWebShare">
					<view class=" e-flex-xy-center">
						<view class="share-item__box e-flex-xy-center">
							<image class="img-40" :src="$staticPath('popup_share.png')"></image>
						</view>
					</view>
					<view class="e-font-24 text-center">{{ $t('layout.分享') }}</view>
				</view>
				<view class="share-item e-p-t-28 e-flex-3" @tap="$copy(shareUrl)">
					<view class=" e-flex-xy-center">
						<view class="share-item__box e-flex-xy-center">
							<image class="img-40" :src="$staticPath('popup_copy.png')"></image>
						</view>
					</view>
					<view class="e-font-24 text-center">{{ $t('common.复制链接') }}</view>
				</view>
				<view class="share-item e-p-t-28 e-flex-3" @tap="hanldeSave">
					<view class=" e-flex-xy-center">
						<view class="share-item__box e-flex-xy-center">
							<image class="img-40" :src="$staticPath('popup_save.png')"></image>
						</view>
					</view>
					<view class="e-font-24 text-center">{{ $t('common.保存图片') }}</view>
				</view>
				<!-- #endif -->
		
		
			</view>
		
		</view>
		<!-- #endif -->
		<!-- #endif -->

		<!-- #ifdef PRIVATE || SUBSCRIPTION  -->
		<view class="mp-box">
			<view >
				<view class="e-flex">
					<view class="img-header e-flex-1 e-flex e-flex-items-start">
						<image :src="$staticPath('share_arrow.png')" class="share-arrow e-m-r-16"></image>
						<view class="share-tips c-white e-flex">
							<text>{{ $t('common.长按图片保存或转发') }}</text>
						</view>
					</view>
					<image src="/static/layout/close.png" class="img-48 e-m-b-40" @tap="$emit('close')"></image>
				</view>
				<image :class="[type === '1' ? 'goods-share-img' : 'store-share-img']" :src="mpShareUrl"></image>
			</view>
		</view>
		<!-- #endif -->
	</e-popup>
</template>

<script lang="ts" setup>
	import { APP_DOMAIN, APP_SHARE_CARRY_PARAMS } from '@/env'
	import { objToUri, page,saveImage } from '@/common/utils'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	
	

	const props = defineProps<{
		show : boolean,
		mpShareUrl : string,
		shareUrl: string,
		type : '1' | '2'
		shareText?:string
	}>()
	const emit = defineEmits(['close'])
	
	const ctx = useCurrentInstance()
	
	let popupMode =  'bottom'

	// #ifdef PRIVATE || SUBSCRIPTION
	popupMode = 'center'
	// #endif
	// #ifdef H5
	const hasWebShare = 'share' in window.navigator
	// #endif


	// #ifdef APP-PLUS
	const share = (scene : 'WXSceneSession' | 'WXSceneTimeline' | 'WXSceneFavorite') => {
		let { title, imageUrl, appParams = {}, appDesc } = uni.$endless.mpShare
		let href = APP_DOMAIN
		if (APP_SHARE_CARRY_PARAMS) {
			href = `${href}${page()}?${objToUri(appParams)}`
		}
		uni.share({
			provider: 'weixin',
			scene,
			type: 0,
			href, //分享连接打开的网址
			title,
			summary: appDesc || '',
			imageUrl, //分享封面图片
			success: res => {
				emit('close')
			},
			fail: err => {
				console.log('fail:' + JSON.stringify(err))
			}
		})
	}
		// #endif
	// #ifdef H5
	const webShare = () => {
		if (window.navigator?.share) {
			window.navigator.share({
					title: document.title,
					text: this.shareText,
					url: props.shareUrl
				}).finally(() => {
					emit('close')
				})
		}
	}
	// #endif
	
	const hanldeSave = () => {
		saveImage(props.mpShareUrl).then(res => {
			// #ifdef APP-PLUS
			uni.showToast({
				title: ctx.$t('user.保存相册成功'),
				icon: 'success',
				mask: false,
				duration: 2000
			})
			// #endif
			emit('close')
		})
	}
</script>

<style lang="scss" scoped>

	.share-item {
		height: 188rpx;
		margin: 0;

		&__box {
			width: 104rpx;
			height: 104rpx;
		
			image {
				border-radius: 0 !important;
			}
		}
		
		image {
			border-radius: 50%;
			margin-bottom: 16rpx;
			width: 104rpx;
			height: 104rpx;
		}
	}
	
	
	.h5-box {
		border-radius: 40rpx 40rpx 0px 0px;
		padding-top: 180rpx;
	
		&__img {
			left: calc(50% - 290rpx);
			bottom: 188rpx;
		}
	}


	
	.goods-share-img {
		box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.2);
		border-radius: 40rpx;
		width: 580rpx;
		height: 780rpx;
	}
	
	.store-share-img {
		box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.2);
		border-radius: 40rpx;
		width: 580rpx;
		height: 894rpx;
	}

	/* #ifdef PRIVATE || SUBSCRIPTION */
	.mp-box {


		.img-header {
			height: 170rpx;
			padding: 0 0 16rpx 36rpx;

			.share-arrow {
				width: 84rpx;
				height: 102rpx;
				margin-top: auto;
			}

			.share-tips {
				padding: 0 20rpx;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 20rpx;
				border: 4rpx dashed #ffffff;
			}
		}
	}

	/* #endif */
</style>